<template>
	<view class="create">
		<view class="formsBox">
			<uni-forms ref="form" :modelValue="formData" :label-width="100" :rules="rules">
				<uni-forms-item label="选择车辆" name="carId">
					<uni-data-select
						v-model="formData.carId"
						:localdata="carList"
						placeholder="请选择请假类型"
					></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="里程" name="kilometers">
					<uni-easyinput type="text" v-model="formData.kilometers" placeholder="请输入里程" disabled />
				</uni-forms-item>
				<uni-forms-item label="油卡" name="cardId">
					<uni-data-select
						v-model="formData.cardId"
						:localdata="typeList"
						placeholder="请选择油卡"
					></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="加油时间" name="refuelingTime">
					<uni-datetime-picker  type="datetime" v-model="formData.refuelingTime" return-type="timestamp" placeholder="请选择加油时间" />
				</uni-forms-item>
				<uni-forms-item label="加油金额" name="amount">
					<uni-easyinput type="text" v-model="formData.amount" placeholder="请输入加油金额" disabled />
				</uni-forms-item>
				<uni-forms-item label="公升" name="liter">
					<uni-easyinput type="text" v-model="formData.liter" placeholder="请输入公升" disabled />
				</uni-forms-item>
				<uni-forms-item label="加油站名称" name="gasStationName">
					<uni-easyinput type="text" v-model="formData.gasStationName" placeholder="请输入加油站名称" disabled />
				</uni-forms-item>
				<uni-forms-item label="加油标号" name="octaneRating">
					<uni-data-select
						v-model="formData.octaneRating"
						:localdata="octaneRatingList"
						placeholder="请选择加油标号"
					></uni-data-select>
				</uni-forms-item>
			</uni-forms>
		</view>
		<!-- <view class="buttonBox" v-if="!processId">
			<button class="button" @click="submit" type="primary">提交</button>
		</view> -->
	</view>
</template>

<script>
	import {OilCardList,getCarSimpleList,getCarOilInfo} from '@/api/oilUse/index.js'
	import {getIntDictOptions} from '@/utils/auth.js'
	export default {
		data() {
			return {
				formData:{},
				// 油卡列表
				typeList:[],
				// 车辆列表
				carList:[],
				// 加油标号列表
				octaneRatingList:[],
				// 详细信息
				// OilInfo:{}
			};
		},
		methods:{
			// 油价列表
			async getOilCardList(){
				let list = await OilCardList()
				console.log(list)
				this.typeList = list.data.map(item=>{
					return {
						text:item.secondaryFuelCardNo,
						value:item.id,
					}
				})
			},
			// 获取车辆列表
			async getCarList(){
				let carList = await getCarSimpleList()
				console.log(carList)
				this.carList = carList.data.map(item=>{
					return {
						text:item.licensePlate,
						value:item.id,
					}
				})
			},
		},
		async onLoad(option) {
			// 获取油卡列表
			this.getOilCardList()
			// 获取车辆列表
			this.getCarList()
			// 加油标号列表
			this.octaneRatingList = await getIntDictOptions('oa_octane_rating');
			// 获取详情信息
			let OilInfo = await getCarOilInfo(option.id)
			this.formData = OilInfo.data
		}
	}
</script>

<style lang="less" scoped>
.create{
	width: 100%;
	height: auto;
	padding-top: 20rpx;
	.formsBox{
		width: 100%;
		height: auto;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		.uni-forms-item{
			margin-bottom: 30rpx;
		}
		.itemBox{
			.btnBoxs{
				display: flex;
				align-items: center;
			}
		}
	}
	.buttonBox{
		width: 100%;
		height: auto;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 40rpx;
	}
	.itemlineBox{
		height: 100%;
		display: flex;
		align-items: center;
	}
}
</style>
